<template>
<div class="lists"> 
      <div class="nav">
        <h3>叩丁狼电商运营平台</h3>
      </div>
      <div class="left">
        <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        router
      >
        <el-sub-menu :index="menu.id+''" v-for="menu in menus" :key="menu.id">
          <template #title>
            <el-icon><location /></el-icon>
            <span>{{menu.title}}</span>
          </template>
          <template v-for="imenu in menu.children">
            <el-menu-item :index="`/${menu.name}/${imenu.name}`" v-if="!imenu.hidden" >{{imenu.title}}</el-menu-item>
          </template>
        </el-sub-menu>
      </el-menu>
      <div class="right">
        <router-view></router-view>
      </div>
    </div>
   
  </div>
</template>

<script lang='ts' setup>
import { computed } from 'vue';
import { useAdminStore } from '../../store/modules/admin';

const adminStore = useAdminStore();
const menus = computed(() => adminStore.genNewMenus);

</script>
<style lang='less' scoped>
  .lists{
    height: 100%;  
    .nav{
      height: 70px;
      background-color: #409eff;
       h3{
        display: inline-block;
        padding: 0 20px;
        line-height: 70px;
        font-weight: 400;
        font-size: 24px;
        color: #fff;
    }
    }
    .left{
        display: flex;
        height: 100%;
      .el-menu{
        width: 250px;
        overflow: hidden;
      }
      .menu-container {
        width: 300px;
        height: 100%;
        background-color: rgb(48, 65, 86);
        // overflow: auto;
      }
      .right{
        flex: 1;
        overflow: auto;
      }
    }
  }
</style>